import React, { useState } from "react";
import classNames from "classnames";
import Icon from "../Icon/Icon";

export enum AlertType {
  Success = "success",
  Error = "error",
  Warning = "warning",
  Info = "info",
  Danger = "danger",
}

interface BaseAlertProps {
  type?: AlertType;
  message?: string;
  description?: string;
  className?: string;
  width?: string;
  closable?: boolean;
  onClose?: () => void;
}

type NativeAlertProps = BaseAlertProps &
  React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;

type AlertProps = Partial<NativeAlertProps>;

const Alert = (props: AlertProps) => {
  let {
    type,
    message,
    onClose,
    description,
    className,
    closable,
    ...restProps
  } = props;
  const [closed, setClosed] = useState(false);
  const classes = classNames("alert", className, {
    [`alert-${type}`]: type,
    "alert-hidden": !!closable && !!closed,
  });

  const closeAlert = () => {
    setClosed(true);
    !!onClose && onClose();
  };
  return (
    <div className={classes} {...restProps}>
      <div className="alert-content">
        {closable && (
          <div className="alert-close" onClick={closeAlert}>
            <Icon icon="close"></Icon>
          </div>
        )}
        {message && <div className="alert-message">{message}</div>}
        {description && <div className="alert-description">{description}</div>}
      </div>
    </div>
  );
};

Alert.defaultProps = {
  type: AlertType.Info,
};

export default Alert;
